<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>

    <div id="app"> 
        <div style="display:flex">
            <div style="width:50vw">

                <div style="display:flex;flex-direction: row-reverse;" v-for="row of left">
                    <div class="box" v-for="item of row" :class="selected.includes(item) ? 'ac':'' " @click="handleClick(item)"></div>
                </div>
     
            </div>
            <div style="width:50vw">
                <div style="display:flex;flex-direction: row;" v-for="row of right">
                    <div class="box" v-for="item of row" :class="selected.includes(item) ? 'ac':'' " @click="handleClick(item)"></div>
                </div>
            </div>

        </div>

        {{ selected }}

        <button @click="nowRnd">随机5个</button>
      
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{

                left:[ ],
                right: [],
                selected:[],
                randarr:[]
            },
            created(){
                this.genLeft();
                this.genRight();
            },
            computed:{
                all(){
                   let _left = [];
                   this.left.forEach(element => {
                        _left = [..._left,...element]
                   });
                   let _right = [];
                   this.right.forEach(element => {
                     _right = [..._right,...element]
                   });
                   return [..._left,..._right];

                }
            },
            methods:{
                nowRnd(){
                    this.randarr = [];
                    this.genRandom();
                },
                genRandom(){
                    console.log('fired', this.randarr.length)
                    if(this.randarr.length>=5) {
                       this.selected  = this.randarr.map(item=> this.all[item] );
                      return
                    }
                    // 生成5个随机数 在all的数组长度范围以内的值
                    const rand = Math.random(); // [0,1)
                    const len = this.all.length;

               
                     let nowrnd = Math.ceil(rand*len); // 
        
                     if(this.randarr.length < 5  &&  !this.randarr.includes(nowrnd)){
                        console.log('放进去数组当中', nowrnd)
                        this.randarr.push(nowrnd);
                     }
                     this.genRandom();
                    
                },
                genLeft(){
                    let maxrow = 10;
                    let start = 5;
                    let left = [];
                    for(let i = 1;i<=maxrow;i++){
                        left[i] = [];
                        for(let t=1;t<=start; t++){
                            left[i].push(`left${i}${t}`)
                        }
                        start++;
                    }
                    this.left = left.reverse();

                },
                genRight(){
                    let maxrow = 10;
                    let start = 5;
                    let left = [];
                    for(let i = 1;i<=maxrow;i++){
                        left[i] = [];
                        for(let t=1;t<=start; t++){
                            left[i].push(`right${i}${t}`)
                        }
                        start++;
                    }
                    this.right = left.reverse();

                },
                handleClick(item){
                    if(this.selected.includes(item)){
                         this.selected = this.selected.filter(it=>it!==item);
                    } else {
                        if(this.selected.length>=5) return alert('不能超过5个');
                        this.selected.push(item);
                    }
                }
            }

        })
    </script>

    <style>
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }
        .ac{
            background: red;
        }
    </style>
</body>
 </html>